<template>
    <div class="home_Main_comtainer">
        <el-menu
            :default-active="activeIndex"
            class="nav"
            mode="horizontal"
            @select="handleSelect"
            background-color="#fff"
            text-color="#666"
            active-text-color="#ffd04b">
            <el-menu-item index="1">博客</el-menu-item>
            <el-menu-item index="2">收藏</el-menu-item>
            <el-menu-item index="3">关注</el-menu-item>
        </el-menu>
        <router-view :userLogin="userLogin" :userChoosed="userChoosed"></router-view>
    </div>
</template>

<script>
export default {
    name:'HomeMain',
    props:['userLogin','userChoosed'],
    data() {
      return {
        activeIndex: '1',
        mainRouters:['/','/collections','/follows'],
      };
    },
    methods: {
      handleSelect(key, keyPath) {
            let id=this.$route.params.id;
            this.$router.push(`/home/${id}${this.mainRouters[Number(key)-1]}`);
      }
    },
    created(){
        let route=this.$route.fullPath;
        let routeSplit=route.split('/');
        this.activeIndex=String(this.mainRouters.indexOf("/"+routeSplit[routeSplit.length-1])+1);
        if(this.activeIndex=='0'){
          this.activeIndex='1';
        }
        // this.$router.push(`${route}`);
    },
    watch:{
      $route(){
        let route=this.$route.fullPath;
        let routeSplit=route.split('/');
        this.activeIndex=String(this.mainRouters.indexOf("/"+routeSplit[routeSplit.length-1])+1);
        if(this.activeIndex=='0'){
          this.activeIndex='1';
        }
        // this.$router.push(`${route}`);
      }
    }
}
</script>

<style scoped>
.home_Main_comtainer{
    width:100%;
    /* height:100px; */
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.04);
    border:1px solid #ccc;
    box-sizing: border-box;
}
</style>

